import { defineStore } from "pinia";
import { ref } from "vue";

// export const useStockStore = defineStore('stock', () => {
//     const stock = ref(20)
//     const addStock = () => stock.value++
//     const subStock = () => stock.value--
//     return {
//         stock,
//         addStock,
//         subStock
//     }
// })

export const useStockStore = defineStore('store', {
    state: () => ({
        stock: 20
    }),
    getters: {
        doubleStock: state => state.stock * 2,
    },
    //箭头函数不会绑定自己的 this 上下文，
    // 所以 this 在这里不是指向 store 实例，而是 undefined，因此访问 this.stock 时会报错。
    // actions: {
    //     addStock: () => this.stock++,
    //     subStock: () => this.stock--
    // } 
    actions: {
        addStock() {
            this.stock++
        },
        subStock() {
            this.stock--
        }
    } 
})

    //箭头函数的 this 是词法绑定的，它在函数定义时就确定了，不会改变
    //普通函数的 this 是动态绑定的，它的值取决于函数如何被调用